<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>系统管理</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
</head>

<body>
<div class="place">
  <span>位置：</span>
  <ul class="placeul">
    <li>系统管理</li>
    <li>区域管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">省份：</label>
      <div class="layui-input-inline">
        <input type="text" id="provincial" name="provincial" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>

      <label class="layui-form-label">城市：</label>
      <div class="layui-input-inline">
        <input type="text" id="city" name="city" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>


      <div class="layui-form-item">
        <div class="layui-btn-container" style="padding:20px 20px 0px 20px">
          <button type="button" class="layui-btn layui-btn-normal  btn-search" ><i class="layui-icon layui-icon-search"></i>查询</button>
        </div>
      </div>
      <table id="demo" lay-filter="test"></table>

    </div>
  </form>
  <script>
    layui.use(['table','form','layer','jquery'], function () {
      var table = layui.table,
              form = layui.form,
              layer = layui.layer,
              $ = layui.jquery;
      //表单初始化 传参

      //查询
      $('.btn-search').on('click', function () {
        var provincial = $('#provincial').val();
        var city = $('#city').val();
        table.reload('demo', {
          url: 'area/getAreaList',
          method: 'post',
          dataType: 'json',
          where: { //设定异步数据接口的额外参数，任意设
            provincial: provincial,
            city: city,
          },
          page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      });

      table.render({
        elem: '#demo'
        ,height: 600
        ,url: 'area/getAreaList' //数据接口
        ,page: true //开启分页
        ,loading:true
        ,limit: 10   // 每页条数默认10
        ,limits: [1, 2, 4, 5,6,8,10] //设置可选的每页条数
        ,toolbar: 'default' //开启头部工具栏，并为其绑定左侧模板
        ,cellMinWidth: 0 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,id:'demo'
        ,cols: [[ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'id', title: '序号',type:'numbers', sort: true, fixed: 'left',align: "center" }
          ,{field: 'pno', title: '省编号', sort: true,align: "center"
            ,templet: function (res) {
              return res.provincial.pno;
            }}
          ,{field: 'provincial', title: '省名称', align: "center"
            ,templet: function (res) {
              return res.provincial.provincial;
            }}
          ,{field: 'cno', title: '市编号', align: "center"}
          ,{field: 'city', title: '市名称',align: "center"}
        ]]
        ,done: function (){
          table.resize('demo');
        }
      });
      form.render();
    });
  </script>
</div>
</body>
</html>
